<template>
	<joy-page class="joyPage">
		<cu-custom style="color: #ffffff;" bgColor="#ffffff" :isBack="false"><block slot="content">我的</block></cu-custom>
		<view class="user-box" :style="{'top':customBar+'px'}">
			<view class="person-header ">
				<view class="person-card ">
					<view class="cu-list menu-avatar">
						<view class="cu-item">
							<view class="cu-avatar round lg" :style="'background-image:url(' +imgUrl + userInfo.head_thumb+ ')'"></view>
							<view class="content">
								<view class="text-grey">
									<view class="text-cut text-username">{{userInfo.username}}</view>
									<!-- <image v-show='userInfo.is_vip === 1' src="/static/img/VIP.png" class="vip"></image> -->
									<view class="vip" v-show='userInfo.is_vip === 1'>vip会员</view>
								</view>
								<view class="text-sm flex">
									<view class="text-cut text-gray">
										我的邀请码：{{userInfo.invite}}
									</view>
									<!-- <button open-type="share" class="text-cut text-orange invate">邀请好友</button> -->
								</view>
							</view>
							<view class="head-right">
								<button open-type="share" class="text-cut text-orange invate">邀请好友</button>
								<view class="qrcode">
									<!-- <image style="width:44rpx;height: 44rpx;" src="/static/img/qrcode.png" @tap="goBigQrcode('qrCode')"></image> -->
									<image style="width:44rpx;height: 44rpx;" src="/static/img/more.png" @tap="goPage('userInfo')"></image>
								</view>
								
								<!-- <view class="action" style="width: 70rpx;" @tap="goPage('userInfo')">
									<view class="cuIcon-right"></view>
								</view> -->
							</view>
							
						</view>
					</view>
					<image class="tiaoxing" src="/static/img/tiaoxing.png" @tap="goBigQrcode('qrCode')"></image>
					<view class="cu-list grid col-4 no-border">
						<view class="cu-item" v-for="(item,index) in cuIconList" :key="index" @tap="goPage(item.routerName)">
							<view :class="['hryicon_' + item.cuIcon]">
								<view class=" badge" v-if="item.badge!=0">
										<block v-if="item.badge!=1">{{item.badge>99?'99+':item.badge}}</block>
									</view>
							</view>
							<text>{{item.name}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="money-box">
				<view class="m-b-title">账户资产(元)</view>
				<view class="flex justify-between  align-center">
					<view class="text-gray text-sm m-b-inline money" @tap="goPage('balance')">{{userInfo.money}}
					</view>
					<view class="money-outIn">
						<button class="chongzhi" @tap="goPage('recharge')">充值</button>
						<button class="tixian" @tap="goPage('withdraw')">提现</button>
					</view>
				</view>
			</view>
			<view class="cu-modal" :class="isShow? 'show': ''">
				<view class="cu-dialog bg-white">
					<view class="flex flex-direction padding justify-end bank-box">
						<image class="warning-img" src="https://test.hrycf.com/hryxcx/delbankCard.png"></image>
						<!-- <view class="text-lg">
							温馨提示
						</view> -->
						<text class="text-df bg-white">
							您尚未签订通联电子协议，请使用电脑或者手机浏览器登录好融艺官网进行签订，否则无法提现
						</text>
						<view class="tishi">
							<!-- <button class="cu-btn bg-orange round" @tap.stop="delCard(cardInfo.id)">确定</button>
							<view class="cancel"><span  @tap.stop="isShow=false">取消</span></view> -->
							<span @tap="isShow=false">我知道了</span>
						</view>
					</view>
					<!-- <view class="action close-wrapper text-white text-xl" @tap="hideModal">
						<text class="cuIcon-close"></text>
					</view> -->
				</view>
			</view>
			<!-- <view class="cu-list grid col-4 no-border">
				<view class="cu-item" v-for="(item,index) in cuIconList" :key="index" @tap="goPage(item.routerName)">
					<view :class="['hryicon_' + item.cuIcon]">
						<view class="cu-tag badge" v-if="item.badge!=0">
								<block v-if="item.badge!=1">{{item.badge>99?'99+':item.badge}}</block>
							</view>
					</view>
					<text>{{item.name}}</text>
				</view>
			</view> -->
			<view class="cu-list menu sm-border">
				<button open-type="contact" class="cu-item arrow chat">
					<view class="content">
						<text class="text-grey">{{userInfo.is_vip === 1? 'VIP专属客服':'在线客服'}}</text>
					</view>
				</button>
				<view class="cu-item arrow" @tap="goPage('contract')">
					<view class="content">
						<text class="text-grey">合同管理</text>
					</view>
				</view>
				<view class="cu-item arrow" @tap="goPage('message')">
					<view class="content">
						<text class="text-grey">消息通知{{userInfo.notice_num>0? '('+userInfo.notice_num+')':'' }}</text>
					</view>
				</view>
				<view class="cu-item arrow" @tap="goPage('questionnaire')">
					<view class="content question-title">
						<text class="text-grey">风险承受能力评估</text>
						<text class="text-grey">{{userInfo.member_type}}</text>
					</view>
				</view>
				<!-- <view class="cu-item arrow" @tap="logout()">
					<view class="content question-title">
						<text class="text-red">退出登录</text>
						<text class="text-grey"></text>
					</view>
				</view> -->
			</view>
			<view class="out-login"  @tap="logout()">
				退出登录
			</view>
		</view>
	</joy-page>
</template>

<script>
	import {
		mapState,
		mapGetters
	} from 'vuex'
	export default {
		components: {},
		computed: {
			...mapState(['forcedLogin']),
			...mapGetters(['hasLogin', 'hasCheck'])
		},
		data() {
			let that = this;
			return {
				imgUrl: that.$mConfig.assetsPath,
				customBar:that.CustomBar+10,
				cuIconList: [{
					cuIcon: 'xinhaoyou',
					color: 'red',
					name: '我的好友',
					routerName:'friends'
				}, {
					cuIcon: 'xiangmu',
					color: 'orange',
					name: '项目管理',
					routerName:'myProject'
				}, {
					cuIcon: 'yinlianka',
					color: 'yellow',
					name: '我的银行卡',
					routerName:'bankCard'
				}, {
					cuIcon: 'anquan',
					color: 'olive',
					name: '安全中心',
					routerName:'safetyCenter'
				}],
				isShow:false,
				userInfo: {}
			}
		},
		async onLoad(query) {
			await this.$AppEntryController.main(query);
		},
		onShow(){
			if(this.hasLogin){
				this.getPersonInfo()
				console.log(this.userInfo)
			}
		},
		methods: {
			goPage(routerName){
				if(routerName==='withdraw'){
					if(this.userInfo.is_sign===1){
						this.isShow=true
						return
					}else if(this.userInfo.is_sign===2){
						this.$mRouter.push({
							route: this.$mRoutesConfig[routerName]
						})
					}
				}else{
					this.$mRouter.push({
						route: this.$mRoutesConfig[routerName]
					})
				}
				
			},
			goBigQrcode(routerName){
				let invite=''
				if(this.userInfo.invite){
					invite=this.userInfo.invite
				}else {
					invite=''
				}
				this.$mRouter.push({
					route: this.$mRoutesConfig[routerName],
					query:{
						inviteId:invite
					}
				})
			},
			async getPersonInfo() {
				this.userInfo = await this.$apis.getPerson();
				this.$store.commit("SET_USERINFO", this.userInfo || {});
			},
			async logout() {
				await this.$apis.logout();
				uni.clearStorageSync();
				let res = await this.$apis.getSessionId();
				uni.setStorageSync('sessionId', res.session_id);
				this.$store.commit("SET_TOKEN", '');
				this.goPage('login')
			}
		},
		onShareAppMessage() {
		   return {
			   title: this.userInfo.username +'邀请你来好融艺',
			   path:'pages/login/reg?invite='+this.userInfo.invite,
			   imageUrl:'../../static/img/share.jpeg'
		   }
		}
	}
</script>

<style lang="scss" scoped>
	.joyPage {
		// background-color: #FFFFFF;
		
		position: relative;
		background-image: url("https://test.hrycf.com/hryxcx/userBg.jpg");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		-moz-background-size: 100% 100%;
		text-align: center;
		height:299rpx ;
		.nav-title{
			position: fixed;
			font-size: 14px;
            color: #ffffff;
			top:30px;
			left: 50%;
			transform: translate(-50%,0);
			
		}
		.user-box{
			position: fixed;
			// top: 64px;
			left: 0;
			right: 0;
			bottom: 0;
			overflow: scroll;
		}
	}
   /* .chat{
		button:after{
			border: none;
		}
	} */
	.person-header {
		// background: linear-gradient(90deg, rgba(33, 36, 45, 1) 0%, rgba(33, 36, 45, 1) 99%);
		width: 690rpx;
		margin: 0 auto;
		border-radius: 20rpx;
		background-color: #ffffff;
		// height: 240rpx;
		padding: 20rpx 0rpx 0 0rpx;
        position: relative;
		.tiaoxing{
			position: absolute;
			width: 276rpx;
			height: 49rpx;
			display: block;
			top: 0;
			right:21rpx;
		}
		.person-card {
			padding: 11rpx 0 0;
			width: 100%;
			// height: 100%;
			// background: linear-gradient(90deg, rgba(234, 238, 247, 1), rgba(146, 162, 187, 1));
			border-radius: 14rpx 14rpx 0rpx 0rpx;
			.vip{
				width: 99rpx;
				height: 31rpx;
				background: linear-gradient(to left,#E3BA84,#ECD2A1);
				text-align: center;
				line-height: 31rpx;
				color: #AD772E;
				border-radius: 15.5rpx;
				font-size: 20rpx;
			}
		}
	}
    .qrcode{
		display: flex;
		justify-content: flex-end;
		align-items: center;
		margin-top: 64rpx;
	}
	.grid {
		width: 100%;
		// background: rgba(47, 48, 68, 1);
		background: #ffffff;
	}

	.cu-list.grid>.cu-item {
		margin-top: 0;
	}

	.cu-list.grid.no-border {
		padding: 10rpx 30rpx 0rpx;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;

		text {
			// color: rgba(170, 172, 185, 1);
			color: #333333;
		}
	}

	[class*="hryicon_"] {
		font-size: 54rpx;
		// color: rgba(170, 172, 185, 1);
		color: #333333;
	}

	.cu-list.grid.no-border>.cu-item {
		padding: 29rpx 0;
	}

	.cu-list+.cu-list {
		margin-top: 0;
		button::after{
			border: none;
		}
	}

	.content {
		background-color: #FFFFFF;
		.text-grey {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(33, 36, 45, 1);
			text-align: left;
			.text-username{
				font-size: 34rpx;
			}
		}
	}
	.head-right{
		padding: 0 21rpx 0 0;
	}
	.question-title{
		flex-direction: row;
		justify-content: space-between;
	}
    .cu-list.menu-avatar{
		overflow: none;
	}
	.cu-list.menu-avatar>.cu-item {
		background-color: transparent;
		padding: 29rpx 0;
         .invate{
			   background: #FE727D;
			   font-size: 28rpx;
			   height: 54rpx;
			   line-height: 54rpx;
			   color: #ffffff;
			   border-radius: 27rpx;
			   position: absolute;
			   right: -27rpx;
			   padding: 0 27rpx;
			  }
	   /*  button{
			 width: 110rpx;
			 height: 27rpx;
			 display: inline;
			 font-size: 28rpx;
			 color: #FC5870;
		 }		 
		 button::after{
			 border: none;
		 }	  */
		.cuIcon-right {
			color: #3A4860;
			padding: 10rpx;
			text-align: right;
		}
	}

	.cu-list.menu-avatar>.cu-item .content {
		background-color: transparent;

		.vip {
			width: 99rpx;
			height: 31rpx;
			margin-left: 22rpx;
		}

		.text-gray {
			color: #66727F;
			line-height: 28rpx;
			padding-top: 20rpx;
		}

		.text-orange {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: rgba(141, 122, 87, 1);
			margin-left: 29rpx;
			line-height: 28rpx;
		}
	}

	.money-box {
		padding: 30rpx 38rpx 30rpx 38rpx;
        background-color: #ffffff;
		margin-top:24rpx ;
		.m-b-title{
			text-align: left;
			padding-bottom: 30rpx;
			font-size: 30rpx;
			font-weight: 600;
		}
		.text-gray {
			color: #66727F;
			line-height: 28rpx;
		}

		.money {
			display: inline;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 800;
			color: #FC5870;
		}
		.money-outIn{
			.chongzhi{
				width: 120rpx;
				height: 48rpx;
				background-color: #FD8959;
				text-align: center;
				line-height: 48rpx;
				font-size: 24rpx;
				color: #ffffff;
				display: inline-block;
			}
			.chongzhi::after{
				border:none;
			}
			.tixian{
				width: 120rpx;
				height: 48rpx;
				background-color: #ffffff;
				border: solid 1px #FD8959;
				text-align: center;
				line-height: 48rpx;
				font-size: 24rpx;
				color: #FD8959;
				display: inline-block;
				margin-left: 36rpx;
			}
			.tixian::after{
				border:none;
			}
		}
	}
	.cu-dialog{
	width: 560rpx;
	overflow: visible;
	border-radius: 20rpx;
	 .bank-box{
		 padding: 30rpx 50rpx 0rpx 50rpx;
	       .warning-img{
			   width: 321rpx;
			   height: 284rpx;
			   position: absolute;
			   top: 0;
			   left: 50%;
			   -webkit-transform: translate(-50%, -50%);
			   transform: translate(-50%, -50%);
			   z-index: 9999;
		   }
		   .text-df{
			   font-size: 32rpx;
			   font-family: PingFang SC;
			   font-weight: 500;
			   color: #646464;
			   text-align: justify;
			   text-indent: 70rpx;
			   margin-top: 120rpx;
		   }
		   .cu-btn{
			   display: block;
			   width: 450rpx;
			   height: 88rpx;
			   line-height: 88rpx;
			   text-align: center;
			   padding: 0;
			   margin: 0 auto;
		   }
		   .cancel{
			   text-align: center;
			   line-height: 88rpx;
			   color: #969696;
			   margin-top: 20rpx;
		   }
		   .tishi{
			 // margin-top: 50rpx;
			 font-size: 34rpx;
			 color: #333333;		  
		   }
	 }
	}
	.sm-border{
		margin-top: 24rpx;
		button::after{
			border:none
		}
	}
    .out-login{
		width: 386rpx;
		height: 68rpx;
		background:rgba(255,179,128,1);
		border-radius: 34rpx;
		text-align: center;
		line-height: 68rpx;
		color: #ffffff;
		font-size: 30rpx;
		margin: 70rpx auto 30rpx;
	}
	.noCheck {
		width: 100%;
		height: 144rpx;
		background: rgba(195, 194, 193, 1);
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(255, 255, 255, 1);
	}
	.cu-dialog{
		width: 548rpx;
		padding: 30rpx 58rpx 50rpx;
		image{
			width: 353rpx;
			margin: 0 auto;
		}
		.text-lg{
			margin: 46rpx 0 38rpx;
			text-align: left;
		}
		.text-df{
			text-align: left;
			margin-bottom: 59rpx;
		}
	}
</style>
